/**
 * @deprecated 生成 HTML 静态字符串
 */

/**
 * 生成 iframe 页面的 HTML 模板
 * @param {Object} config MonacoEditor 的初始化配置项
 * @returns
 */
export function createTemplate(config) {
    return `<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style type="text/css">.container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;}</style>
    </head>
    <body>
        <div class="container"></div>
        <script src="https://cdn.staticfile.org/monaco-editor/0.21.2/min/vs/loader.min.js"></script>
        <script>
            require.config({ paths: { vs: 'https://cdn.staticfile.org/monaco-editor/0.21.2/min/vs' } });
            require(['vs/editor/editor.main'], function () {
                const div = document.querySelector('.container');
                window.instance = monaco.editor.create(div, ${JSON.stringify(config)});
                window.addEventListener('resize', function () {
                    instance.layout();
                });
            })
        </script>
    </body>
</html>`
}

/**
 * 生成 MonacoElement 的 shadow HTML 模板
 * @returns
 */
export function createShadow() {
    return `
<style>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
}
.vs-dark {
    color: #cccccc;
    background: #3c3c3c;
    border-color: #3c3c3c;
}
.hc-black {
    color: #ffffff;
    background: #000000;
    border-color: #222222;
}
.toolbar {
    width: 100%;
    height: 31px;
    line-height: 30px;
    flex-shrink: 0;
    font-size: 12px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
}
.vs-dark .toolbar {
    border-color: #3c3c3c;
}
.hc-black .toolbar {
    border-color: #505050;
}
label:nth-of-type(n + 2) {
    margin-left: 30px;
}
select {
    border: 1px solid #e5e5e5;
    font-size: 12px;
    width: 100px;
    margin-left: 10px;
}
.vs-dark select {
    color: #ffffff;
    border-color: #505050;
    background: #3c3c3c;
}
.hc-black select {
    color: #e3e3e3;
    border-color: #505050;
    background: #000000;
}
select:focus {
    outline: none;
}
iframe {
    width: 100%;
    height: 100%;
    flex-grow: 1;
}
</style>
<div class="container">
<div class="toolbar">
    <label for="language">Language</label>
    <select name="language" id="language">
        <option value="plaintext">text</option>
    </select>
    <label for="theme">Theme</label>
    <select name="theme" id="theme">
        <option value="vs">vs</option>
        <option value="vs-dark">vs-dark</option>
        <option value="hc-black">hc-black</option>
    </select>
</div>
<iframe frameborder="0"></iframe>
</div>`
}